<template>
  <view class="flex items-center device-tj-box">
    <view class="device-tj flex items-center">
      <view class="device-tj-left">
        <view class="device-tj-num">{{ deviceCount.count }}</view>	
        <view class="device-tj-name">
          总设备
        </view>
      </view>
      <image src="/static/images/index-device-total.png" class="device-tj-icon"></image> 
    </view>
    <view class="device-tj flex items-center">
      <view class="device-tj-left">
        <view class="device-tj-num">{{ deviceCount.onlineCount }}</view>	
        <view class="device-tj-name">
          在线设备
        </view>
      </view>
      <image src="/static/images/index-device-online.png" class="device-tj-icon"></image> 
    </view>
    <view class="device-tj flex items-center">
      <view class="device-tj-left">
        <view class="device-tj-num">{{ deviceCount.offlineCount }}</view>	
        <view class="device-tj-name">
          离线设备
        </view>
      </view>
      <image src="/static/images/index-device-offline.png" class="device-tj-icon"></image> 
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
  components: {},
  props: {},
  data() {
    return {
    };
  },
  created() {},
  mounted() {},
  computed: {
    ...mapState({
      deviceCount: state => state.device.deviceCount,
      // currentProject: state => state.project.project
    }),
  },
  methods: {},
  watch: {
    // currentProject:function (val) {
    //   if (val.id) {
    //     this.$store.dispatch('device/getDeviceCount', val.id)
    //   }
    // }
  },
};
</script>
<style lang="scss" scoped>
.device-tj-box{
  margin-top: 22rpx;
  justify-content: space-between;
  .device-tj{
    background-color: #fff;
    width: 215rpx;
    height: 140rpx;
    justify-content: space-between;
    padding-right: 20rpx;
    .device-tj-left{
      padding-left: 24rpx;
      .device-tj-num{
        color: #282A33;
        font-size: 34rpx;
        font-weight: bold;
        line-height: 48rpx;
      }
      .device-tj-name{
        color: $uni-text-color-grey;
        font-size: 24rpx;
        line-height: 33rpx;
      }
    }
    .device-tj-icon{
      width: 48rpx;
      height: 48rpx;
    }
  }
}
</style>